<template>
	<view>
		<view style="background-color: #fff;">
			<up-tabs :list="list1" @click="clickTab" style="width: 100vw;padding-bottom: 10rpx;"
				:activeStyle="activeStyle" :current="current" :itemStyle="itemStyle"></up-tabs>
		</view>
		<view class="u-p-l-24 u-p-r-24 u-m-t-32">
			<view class="mineContent" v-if="current == 0">
				<view class="boleTitle">个人信息</view>
				<up-cell-group>
					<up-cell title="头像">
						<template #value>
							<image src="/static/img/avatar.png" style="width: 60rpx;height: 60rpx;border-radius: 50%;"></image>
						</template>
					</up-cell>
					<up-cell title="用户名" value="admin"></up-cell>
					<up-cell title="手机号" value="18656789876"></up-cell>
					<up-cell title="邮箱" value="tushuguanli@163.com"></up-cell>
				</up-cell-group>
			</view>
			
			<view class="mineContent" v-if="current == 1">
				<view class="boleTitle">安全设置</view>
				<up-cell-group>
					<up-cell title="登陆密码" value="已设置" :isLink="true"></up-cell>
					<up-cell title="安全手机" value="已绑定" :isLink="true"></up-cell>
					<up-cell title="实名认证" value="未实名" :isLink="true"></up-cell>
				</up-cell-group>
			</view>
			
			<view class="mineContent" v-if="current == 2">
				<view class="boleTitle">通知设置</view>
				<up-cell-group>
					<up-cell title="系统通知" value="已设置">
						<template #value>
							<up-switch v-model="value" @change="change"></up-switch>
						</template>
					</up-cell>
					<up-cell title="借阅到期提醒" value="已绑定">
						<template #value>
							<up-switch v-model="value1" @change="change1"></up-switch>
						</template>
					</up-cell>
					<up-cell title="活动推送" value="未实名">
						<template #value>
							<up-switch v-model="value2" @change="change2"></up-switch>
						</template>
					</up-cell>
				</up-cell-group>
			</view>
			
			<view class="mineContent" v-if="current == 3">
				<view class="boleTitle">隐私设置</view>
				<up-cell-group>
					<up-cell title="借阅历史可见">
						<template #value>
							<up-switch v-model="value" @change="change"></up-switch>
						</template>
					</up-cell>
					<up-cell title="个人信息可见">
						<template #value>
							<up-switch v-model="value1" @change="change1"></up-switch>
						</template>
					</up-cell>
					<up-cell title="允许推荐">
						<template #value>
							<up-switch v-model="value2" @change="change2"></up-switch>
						</template>
					</up-cell>
				</up-cell-group>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	const list1 = ref([{
			name: '基本信息'
		},
		{
			name: '安全设置'
		},
		{
			name: '通知设置'
		},
		{
			name: '隐私设置'
		}
	])
	const current = ref(0)
	const clickTab = (e) => {
		current.value = e.index
	}
	const itemStyle = ref({
		'width': '25vw',
		'paddingBottom': '10rpx'
	})
	const activeStyle = ref({
		'color': '#3498DB'
	})
	const value = ref(true)
	const value1 = ref(false)
	const value2 = ref(true)
</script>

<style lang="scss">
	.mineContent {
		background-color: #fff;
		border-radius: 8rpx;
		overflow: hidden;

		.boleTitle {
			font-weight: bold;
			font-size: 30rpx;
			line-height: 30rpx;
			padding: 32rpx 24rpx;
		}
	}
</style>